<template>
  <div class="oil-color-right">
    <div class="return">
      <span @click="goBack"></span>
    </div>
    <div class="right-cont borderStyle">
      <div class="blueTitleStyle">设备</div>
      <div class="flex-box">
        <div>
          <div class="right-top-input">
            <div class="demo-input-suffix">
              间隔单元:
              <el-select
                filterable
                @change="jgdyDown"
                :clearable="true"
                v-model="value"
                placeholder="全部"
              >
                <el-option
                  v-for="(item,index) in jgdyOptions"
                  :key="index"
                  :label="item.intervalName"
                  :value="item.intervalId"
                ></el-option>
              </el-select>
            </div>
            <!-- <el-button
              v-if="isShow==5 || isShow==6 || isShow==7 || isShow==8"
              class="cktpBtn2"
              size="mini"
              type="primary"
              @click="cktpClick"
            >查看图谱</el-button> -->
            <el-button
              v-if="isShow==9"
              class="cktpBtn2"
              size="mini"
              type="primary"
              @click="sjfxClick"
            >数据分析</el-button>
            <el-button
              class="MyBtn"
              size="mini"
              v-if="isShow==3"
              @click="record"
              type="primary"
            >生成压力监测记录</el-button>

            <el-button
              class="MyBtn"
              size="mini"
              v-if="isShow==4"
              @click="blqrecord"
              type="primary"
            >生成避雷器监测记录</el-button>
          </div>
          <div ref="scroll" class="right-top-rotation">
            <Nodata v-if="nodata" />
            <div class="tans" v-if="!nodata" :style="{ left: lefts + '%' }">
              <div
                class="rotation-img"
                v-for="(item, index) in equipmentScreen"
                :key="index"
                @click="visited(item,index)"
                :class="visi === index ? 'visited' : ''"
              >
                <img class="cont" :src="imgsrc" alt srcset />
                <img class="bg" src="../../../../assets/img/OnlineMonitor/dz.png" alt srcset />
                <!-- 本来 equipName-->
                <!-- <div class="rotation-text" :title="item.equipName ">{{ item.equipName }}</div> -->
                <!-- 测试 bayName -->
                <!-- <div class="rotation-text" :title="item.bayName ">{{ item.bayName }}</div> -->
                <!-- 测试 bayId -->
                <div class="rotation-text" :title="item.bayName ">{{ item.bayName }}</div>
              </div>
            </div>
          </div>
          <div :class="colorLeft === 0 ? 'icons' : ''" class="icon icon-left">
            <span @click="left" class="iconfont iconxiayibu-copy"></span>
          </div>
          <div :class="colorRight === 0 ? 'icons' : ''" class="icon icon-right">
            <span @click="right" class="iconfont iconxiayibu-copy"></span>
          </div>
        </div>
        <div v-if="isShow==2" id="Mechanical">
          <div class="tabieBtn">
            <div class="main-btn centerbox">
              <el-button
                v-for="item in tabBtn"
                :key="item.id"
                type="primary"
                @click="setCurrentBtn(item)"
                :class="{active:item.active}"
              >{{item.name}}</el-button>
            </div>
          </div>
          <div v-if="isShow==2" class="tabie">
            <RightTable
              :equipment="equipment"
              :treeList="treeList"
              :table03Arr="newArr"
              @rowId="rowId"
            ></RightTable>
          </div>
        </div>
        <div v-if="isShow==1">
          <RightTable :equipment="equipment" :treeList="treeList" :table03Arr="Arr" @rowId="rowId"></RightTable>
        </div>
        <div
          v-if="isShow==3 || isShow==4 ||isShow==5 || isShow==6 || isShow==7 || isShow==8 || isShow==9"
        >
          <RightTable :equipment="equipment" :treeList="treeList" :table03Arr="Arr" @rowId="rowId"></RightTable>
        </div>
        <!-- <div v-if="isShow==1">
          <videoBox :rowVodeoid="rowVodeoid" />
        </div>-->
      </div>
    </div>

    <el-dialog
      :title="'压力监测记录'"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <RecordPopUp :value="value" v-if="dialogVisible" @handleClose="handleClose" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>

    <el-dialog
      :title="'避雷器监测记录'"
      :visible.sync="blqjcVisible"
      width="80%"
      :before-close="handleClose"
    >
      <blqRecordPopUp :value="value" v-if="blqjcVisible" @handleClose="handleClose" />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <el-dialog :title="tptitle+'图谱'" :visible.sync="tpShow" width="70%" :before-close="handleClose">
      <tpPopUp
        :equipment="equipment"
        :treeList="treeList"
        v-if="tpShow"
        @handleClose="handleClose"
      />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
    <el-dialog :title="'数据分析'" :visible.sync="sjfxShow" width="60%" :before-close="handleClose">
      <sjfxPopUp
        :equipment="equipment"
        :treeList="treeList"
        v-if="sjfxShow"
        @handleClose="handleClose"
      />
      <iframe class="iframe" frameborder="0"></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import RightTable from "./Right/rightTable.vue";
import { OnlineMonitorModule } from "@/store/modules/OnlineMonitor";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import { log } from "three";
import Nodata from "@/components/Nodata/index.vue";
// import videoBox from "./Right/video.vue";

import RecordPopUp from "../SF6/RecordPopUp.vue";
import blqRecordPopUp from "../SurgeArrester/RecordPopUp.vue";
import tpPopUp from "./Right/tp/tpPopUp.vue";
import sjfxPopUp from "./Right/sjfx/sjfxPopUp.vue";

@Component({
  components: {
    RightTable,
    Nodata,
    RecordPopUp,
    blqRecordPopUp,
    tpPopUp,
    sjfxPopUp,
  },
})
export default class rightModular extends Vue {
  //数据状态
  nodata = false;
  // 下拉菜单
  public value: string = "";
  public jgdyOptions: Array<any> = [];
  public visi: any = "";
  public colorLeft: number = 0;
  public colorRight: number = 0;
  public lefts: any = 0;

  //SF记录弹窗状态
  dialogVisible = false;
  //避雷器监测记录
  blqjcVisible = false;
  //数据分析弹窗状态;
  sjfxShow = false;
  // 设备列表
  public equipment: Array<any> = [];
  public equipmentScreen = [];

  // 表格传出来的id
  public rowVodeoid = "";
  imgsrc = require("../../../../assets/img/area/油色谱.png");
  get stationId() {
    return OnlineMonitorModule.stationId;
  }
  get secondLevelObj() {
    // console.log(OnlineMonitorModule.secondLevelObj);
    return OnlineMonitorModule.secondLevelObj;
  }
  get newArr() {
    let arr = this.Arr || [];
    let currentBtn = this.currentBtn;
    arr = arr.filter((v) => {
      let name = v.name || "";
      let test = currentBtn.dataFilterFn.test(name);
      return test;
    });
    return arr;
  }
  //返回按钮
  goBack() {
    this.$router.push("Home");
  }
  //向左
  left() {
    if (this.lefts == 0) {
      return;
    } else {
      this.colorRight = 1;
      this.lefts = this.lefts + 25;
      if (this.lefts == 0) {
        this.colorLeft = 0;
      }
    }
  }
  //向右
  right() {
    if (this.lefts <= -(this.equipment.length - 4) * 25) {
      return;
    } else {
      this.colorLeft = 1;
      this.lefts = this.lefts - 25;
      if (this.lefts == -(this.equipment.length - 4) * 25) {
        this.colorRight = 0;
      }
    }
  }
  //图片点击
  visited(item, index: number) {
    let equipName = item.equipName;
    // console.log(this.jgdyOptions);
    // console.log(item);
    let value = item.bayId || "";
    this.value = item.bayId || "";
    // this.jgdyOptions.forEach((v) => {
    //   if (v.intervalName === equipName) {
    //     value = v.intervalId;
    //   }
    // });
    this.jgdyDown(value);
  }
  deopDown() {
    this.value = "";
    this.visi = -1;
    var from = {
      deviceCode: "",
      stationId: "",
    };
    from.stationId = this.stationId;
    from.deviceCode = this.swcode;
    (this as any).$services
      .queryInterval({ data: from })
      .then((result: any) => {
        // console.log(result);
        this.jgdyOptions = result.data;
        // this.value=result.data[0].intervalId;
      })
      .catch((err: object) => {
        // console.log(err);
      });
  }
  get getxtInfo() {
    // console.log(GetSocketModule.getterAllAuxiliaryByStationId);
    
    return GetSocketModule.getterAllAuxiliaryByStationId[this.stationId] || [];
  }
  erJiSb() {
    // 将点位按照03 sbValue分类

    let xtInfo =
      GetSocketModule.getterAllAuxiliaryByStationId[this.stationId] || [];
    // console.log(xtInfo);

    // 03里面的 有equipId的 点位数组 本来
    // 03里面的 有deviceId的 点位数组 测试
    let zxjc03 = [];
    // xtInfo.map((k) => {
    //   if (k.xtValue === "03" && k.equipId) {
    //     zxjc03.push(k);
    //   }
    // });
    if (xtInfo.length > 0) {
      xtInfo.map((k) => {
        if (k.xtValue === "03" && k.deviceId) {
          zxjc03.push(k);
        }
      });
      // console.log(zxjc03);
    }
    // 过滤遥测
    // zxjc03 = zxjc03.filter((v) => {
    //   return v.remoteType !== "2";
    // });
    // console.log(zxjc03);
    let getJczzObj = (arr) => {
      let jczzObj = {};
      arr.forEach((item) => {
        let key = item.deviceType;
        jczzObj[key] = jczzObj[key] || [];
        jczzObj[key].push(item);
      });
      return jczzObj;
    };
    let zxjc03Type = getJczzObj(zxjc03) || {};

    // console.log(zxjc03Type);

    // console.log(zxjc03Type);
    // 03里面的 有equipId的 点位数组 本来
    // 03里面的 有deviceId的 点位数组 测试
    // 根据equipId去重
    // 根据deviceId去重
    // 根据bayId去重
    // function unique(arr) {
    //   let res = new Map();
    //   return arr.filter(
    //     (arr) => !res.has(arr.equipId) && res.set(arr.equipId, 1)
    //   );
    // }
    // function unique(arr) {
    //   let res = new Map();
    //   return arr.filter(
    //     (arr) => !res.has(arr.deviceId) && res.set(arr.deviceId, 1)
    //   );
    // }
    function unique(arr) {
      let res = new Map();
      return arr.filter((arr) => !res.has(arr.bayId) && res.set(arr.bayId, 1));
    }
    var zxjc03Obj = {};
    for (let key in zxjc03Type) {
      zxjc03Obj[key] = unique(zxjc03Type[key]);
    }
    this.zxjc03Obj = zxjc03Obj;
    // console.log("没处理前 在线监测表格数据",zxjc03Obj);
    // console.log(this.$route.name);

    //右侧表格数据
    // 03里面的 有bayId的 点位数组
    let zxjcRightTable = [];
    xtInfo.map((k) => {
      if (k.xtValue === "03" && k.bayId) {
        zxjcRightTable.push(k);
      }
    });
    // console.log(zxjcRightTable);

    var tableSblist = getJczzObj(zxjcRightTable);
    this.table03Obj = tableSblist;
    // console.log("this.table03Obj:", this.table03Obj);

    switch (this.$route.name) {
      case "OilColor":
        this.swcode = "0301";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/油色谱.png");
        break;
      case "IronCore":
        this.swcode = "0308";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/铁沁接地电流.png");
        break;
      case "Mechanical":
        this.swcode = "0312";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/机械特性.png");
        break;
      case "OpticalFiber":
        this.swcode = "0309";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/光纤监测.png");
        break;
      case "SurgeArrester":
        this.swcode = "0304";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/避雷器监测（避雷器）.png");
        break;
      case "Voiceprint":
        this.swcode = "0313";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/声纹震动.png");
        break;
      case "SwitchCabinet":
        this.swcode = "0311";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/开关柜测温.png");
        break;
      case "N2":
        this.swcode = "0310";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/N2压力监测.png");
        break;
      case "SF6":
        this.swcode = "0305";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/SF6压力监测.png");
        break;
      case "HGIS":
        this.swcode = "0303";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/HGIS监测.png");
        break;

      case "GYTGZHJC":
        this.swcode = "0314";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/N2压力监测.png");
        break;
      case "YZFJKGJC":
        this.swcode = "0315";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/SF6压力监测.png");
        break;
      case "ZBJF":
        this.swcode = "0302";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/HGIS监测.png");
        break;
      case "YWYWJC":
        this.swcode = "0316";
        this.equipmentevent(this.swcode);
        this.tableTevent(this.swcode);
        this.imgsrc = require("../../../../assets/img/area/HGIS监测.png");
        break;
      default:
        break;
    }

    if (this.equipment.length < 1) {
      this.nodata = true;
    } else {
      this.nodata = false;
    }
  }
  public swcode = "0301";
  public zxjc03Obj = {};

  public equipmentevent = function (swcode) {
    this.equipment = [];
    // console.log(this.zxjc03Obj);

    if (this.zxjc03Obj[swcode]) {
      this.equipment = this.zxjc03Obj[swcode];
      // console.log(this.equipment);

      this.equipment = this.equipment.filter((item) => item.bayName);
      if (this.equipment.length <= 4) {
        this.colorLeft = 0;
        this.colorRight = 0;
      } else {
        this.colorLeft = 0;
        this.colorRight = 1;
      }
    }
  };
  public table03Arr = [];
  //表格筛选的数据
  public Arr = [];
  public table03Obj = {};
  public tableTevent = function (swcode) {
    this.table03Arr = [];
    if (this.table03Obj[swcode]) {
      this.table03Arr = this.table03Obj[swcode];
      // console.log(this.table03Arr);
      // var Fixed2 = JSON.parse(JSON.stringify(this.table03Arr));
      this.table03Arr = this.table03Arr;
      // console.log(Fixed2);
    }
  };
  jgdyDown(value) {
    console.log(value);

    this.visi = -1;
    let val = value || this.value;
    this.Arr = [];
    if (val) {
      this.table03Arr.forEach((v) => {
        if (v.bayId == val) {
          this.Arr.push(v);
        }
      });
    } else {
      this.Arr = this.table03Arr;
    }
    this.equipmentScreen = [];
    console.log("this.equipment:", this.equipment);

    if (this.equipment.length > 0) {
      if (val) {
        this.equipment.forEach((v, i) => {
          if (v.bayId == val) {
            this.visi = i;
          }
        });
      }
      this.equipmentScreen = this.equipment;
    }
  }

  rowId(rowid) {
    this.rowVodeoid = rowid;
    // console.log(this.rowVodeoid);
  }

  //是不是 机械特性 .。。  模块
  modules = {
    public: 1, //公共
    Mechanical: 2, //机械特性
    SF6: 3, //SF6压力监测
    SurgeArrester: 4, //避雷器监测（避雷器）
    Voiceprint: 5, //声纹振动
    HGIS: 6, //GIS局放
    GYTGZHJC: 7, //高压套管局放
    ZBJF: 8, //主变局放
    OilColor: 9, //油色谱
  };
  routemodeules = "";
  //控制显示
  isShow = 1;
  @Watch("$route", { immediate: true, deep: true })
  public routechange(to: any, from: any) {
    console.log(to);
    let routemodeules = to.name;
    this.isShow = this.modules[routemodeules] || this.modules["public"];
    console.log(this.isShow);
  }
  @Watch("stationId", { deep: true })
  public stationIdchange(to: any, from: any) {
    this.erJiSb();
    this.Arr = this.table03Arr;
    this.treeList = this.table03Arr;
    this.equipmentScreen = this.equipment;
    this.deopDown();
    // console.log(this.equipment);
  }
  @Watch("getxtInfo", { deep: true })
  public getxtInfochange(to: any, from: any) {
    this.erJiSb();
  }
  treeList = []; //弹窗的数数据
  mounted() {
    this.setCurrentBtn(null);
    if (this.equipment.length > 4) {
      this.colorRight = 1;
    }
    if (this.stationId) {
      this.erJiSb();
    }
    var Fixed2 = JSON.parse(JSON.stringify(this.table03Arr));
    this.Arr = Fixed2;
    this.treeList = Fixed2;
    this.equipmentScreen = this.equipment;
    this.deopDown();
  }

  //机械特性 table按钮
  currentBtn = {
    dataFilterFn: new RegExp("A相|B相|C相", "g"),
  };
  tabBtn = [
    {
      name: "全部",
      active: false,
      dataFilterFn: new RegExp("A相|B相|C相", "g"),
      id: "0",
    },
    {
      name: "A相",
      active: false,
      dataFilterFn: new RegExp("A相", "g"),
      id: "1",
    },
    {
      name: "B相",
      active: false,
      dataFilterFn: new RegExp("B相", "g"),
      id: "2",
    },
    {
      name: "C相",
      active: false,
      dataFilterFn: new RegExp("C相", "g"),
      id: "3",
    },
  ];
  setCurrentBtn(item) {
    this.tabBtn.forEach((v) => {
      v.active = false;
    });
    if (item) {
      item.active = true;
    } else {
      item = this.tabBtn[0] || { active: false };
      item.active = true;
    }
    this.currentBtn = item;
  }
  handleClose() {
    this.dialogVisible = false;
    this.blqjcVisible = false;
    this.tpShow = false;
    this.sjfxShow = false;
  }
  //压力记录
  record() {
    this.dialogVisible = true;
  }
  //避雷器
  blqrecord() {
    this.blqjcVisible = true;
  }
  // 图谱弹窗title
  tptitle: any = "";
  tpShow = false;
  //查看图谱
  cktpClick() {
    // console.log(this.$route.query);

    // this.tptitle = this.$route.query.type;
    this.tptitle = "查看";
    this.tpShow = true;
    // console.log(this.tpShow);
  }
  //数据分析
  sjfxClick() {
    this.sjfxShow = true;
  }
}
</script>

<style lang="scss" scoped>
.oil-color-right {
  width: 6.5rem;
  height: 100%;
  .return {
    width: 100%;
    height: 0.4rem;
    line-height: 0.38rem;
    text-align: right;
    > span {
      display: inline-block;
      width: 0.9rem;
      height: 0.3rem;
      background: url(../../../../assets/img/return.png) no-repeat;
      background-size: 100% 100%;
      vertical-align: middle;
      cursor: pointer;
    }
  }
  .right-cont {
    width: 100%;
    // margin-top: 0.05rem;
    height: calc(100% - 0.4rem);
    .flex-box {
      height: calc(100% - 0.27rem);
      display: flex;
      flex-direction: column;
      > div {
        width: 100%;
      }
      > div:nth-child(1) {
        height: 23%;
        width: 100%;
        position: relative;
        overflow: hidden;
        .right-top-input {
          line-height: 0.4rem;
          box-sizing: border-box;
          padding-left: 0.2rem;
        }
        .icon {
          position: absolute;
          top: 50%;
          z-index: 98;
          color: #36b0eb;
          padding: 0.1rem;
          font-size: 0.2rem;
          cursor: pointer;
        }
        .icon-left {
          left: 2%;
          transform: rotate(180deg);
        }
        .icon-right {
          right: 2%;
        }
        .icons {
          color: #ccc;
        }
        .icons2 {
          color: #ccc;
        }
        .tans {
          position: absolute;
          width: 100%;
          height: 100%;
          transition: all 0.6s;
          top: 0;
        }
        .right-top-rotation {
          height: calc(100% - 0.4rem);
          width: calc(100% - 0.8rem);
          margin: 0 0.4rem;
          overflow: hidden;
          position: relative;
          white-space: nowrap;
          .rotation-img {
            height: 100%;
            width: 25%;
            display: inline-block;
            position: relative;
            .bg {
              width: 1.5rem;
              height: 1.5rem;
              position: absolute;
              left: 50%;
              top: 30%;
              transform: translate(-50%, -50%);
              cursor: pointer;
            }
            .cont {
              width: 0.6rem;
              height: 0.5rem;
              position: absolute;
              left: 50%;
              top: 41%;
              transform: translate(-50%, -50%);
            }
            .rotation-text {
              position: absolute;
              width: 90%;
              left: 50%;
              top: 80%;
              transform: translateX(-50%);
              cursor: pointer;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .rotation-img:hover {
            > .bg {
              transition: all 0.2s;
              width: 1.7rem;
              height: 1.7rem;
            }
            > .cont {
              transition: all 0.2s;
              width: 0.75rem;
              height: 0.6rem;
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.16rem;
            }
          }
          .visited {
            > .bg {
              transition: all 0.2s;
              width: 2rem;
              height: 2rem;
            }
            > .cont {
              transition: all 0.2s;
              width: 0.9rem;
              height: 0.7rem;
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.18rem;
              color: #1ab2ff;
            }
          }
        }
      }
      // > div:nth-child(2) {
      //   height: 46%;
      //   margin: 0.15rem 0;
      // }
      // > div:nth-child(3) {
      //   height: 31%;
      // }
      > div:nth-child(2) {
        height: 77%;
      }
      #Mechanical {
        height: 77%;
        .tabieBtn {
          height: 0.4rem;
          width: 100%;
        }
        .tabie {
          width: 100%;
          height: calc(100% - 0.4rem);
        }
      }
    }
  }
  .active {
    background: linear-gradient(
      360deg,
      rgba(20, 123, 252, 1) 0%,
      rgba(12, 157, 254, 1) 40%,
      rgba(3, 191, 255, 1) 100%
    );
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
.echarts {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" >
.oil-color-right {
  // 下拉框start
  .el-select {
    width: 1.38rem;
  }
  .right-top-input {
    position: relative;
    .MyBtn {
      position: absolute;
      right: 0.25rem;
      top: 0.08rem;
    }
    .cktpBtn1 {
      position: absolute;
      right: 2.2rem;
      top: 0.08rem;
    }
    .cktpBtn2 {
      position: absolute;
      right: 0.25rem;
      top: 0.08rem;
    }
    .el-button {
      padding: 0 0.14rem;
      height: 0.3rem;
    }
    .el-select .el-input .el-input__inner {
      height: 0.24rem !important;
      line-height: 0.24rem !important;
      // border: 1px solid #03bdfd;
    }
    .el-select .el-input .el-input__icon {
      line-height: 0.24rem !important;
    }
  }
}
</style>